<!--
 * @Author: [kangjie]
 * @Date: 2022-09-06 21:36:01
 * @LastEditors: 18222335065 2369811390@qq.com
 * @LastEditTime: 2022-09-07 19:05:53
 * @Description: 
-->
<template>
  <div ref="container" style="height: 95%"></div>
</template>
<script>
// 引入图图表构造函数
import { Line } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  methods: {
    // 封装图表方法
    loadCharts() {
      const data = [
        {
          Date: "2010-01",
          scales: 1998,
        },
        {
          Date: "2010-02",
          scales: 1850,
        },
        {
          Date: "2010-03",
          scales: 1720,
        },
        {
          Date: "2010-04",
          scales: 1818,
        },
        {
          Date: "2010-05",
          scales: 1920,
        },
        {
          Date: "2010-06",
          scales: 1802,
        },
        {
          Date: "2010-07",
          scales: 1945,
        },
        {
          Date: "2010-08",
          scales: 1856,
        },
        {
          Date: "2010-09",
          scales: 2107,
        },
        {
          Date: "2010-10",
          scales: 2140,
        },
        {
          Date: "2010-11",
          scales: 2311,
        },
        {
          Date: "2010-12",
          scales: 1972,
        },
        {
          Date: "2011-01",
          scales: 1760,
        },
        {
          Date: "2011-02",
          scales: 1824,
        },
        {
          Date: "2011-03",
          scales: 1801,
        },
        {
          Date: "2011-04",
          scales: 2001,
        },
        {
          Date: "2011-05",
          scales: 1640,
        },
        {
          Date: "2011-06",
          scales: 1502,
        },
        {
          Date: "2011-07",
          scales: 1621,
        },
        {
          Date: "2011-08",
          scales: 1480,
        },
        {
          Date: "2011-09",
          scales: 1549,
        },
        {
          Date: "2011-10",
          scales: 1390,
        },
        {
          Date: "2011-11",
          scales: 1325,
        },
        {
          Date: "2011-12",
          scales: 1250,
        },
        {
          Date: "2012-01",
          scales: 1394,
        },
        {
          Date: "2012-02",
          scales: 1406,
        },
        {
          Date: "2012-03",
          scales: 1578,
        },
        {
          Date: "2012-04",
          scales: 1465,
        },
        {
          Date: "2012-05",
          scales: 1689,
        },
        {
          Date: "2012-06",
          scales: 1755,
        },
        {
          Date: "2012-07",
          scales: 1495,
        },
        {
          Date: "2012-08",
          scales: 1508,
        },
        {
          Date: "2012-09",
          scales: 1433,
        },
        {
          Date: "2012-10",
          scales: 1344,
        },
        {
          Date: "2012-11",
          scales: 1201,
        },
        {
          Date: "2012-12",
          scales: 1065,
        },
        {
          Date: "2013-01",
          scales: 1255,
        },
        {
          Date: "2013-02",
          scales: 1429,
        },
        {
          Date: "2013-03",
          scales: 1398,
        },
        {
          Date: "2013-04",
          scales: 1678,
        },
        {
          Date: "2013-05",
          scales: 1524,
        },
        {
          Date: "2013-06",
          scales: 1688,
        },
        {
          Date: "2013-07",
          scales: 1500,
        },
        {
          Date: "2013-08",
          scales: 1670,
        },
        {
          Date: "2013-09",
          scales: 1734,
        },
        {
          Date: "2013-10",
          scales: 1699,
        },
        {
          Date: "2013-11",
          scales: 1508,
        },
        {
          Date: "2013-12",
          scales: 1680,
        },
        {
          Date: "2014-01",
          scales: 1750,
        },
        {
          Date: "2014-02",
          scales: 1602,
        },
        {
          Date: "2014-03",
          scales: 1834,
        },
        {
          Date: "2014-04",
          scales: 1722,
        },
        {
          Date: "2014-05",
          scales: 1430,
        },
        {
          Date: "2014-06",
          scales: 1280,
        },
        {
          Date: "2014-07",
          scales: 1367,
        },
        {
          Date: "2014-08",
          scales: 1155,
        },
        {
          Date: "2014-09",
          scales: 1289,
        },
        {
          Date: "2014-10",
          scales: 1104,
        },
        {
          Date: "2014-11",
          scales: 1246,
        },
        {
          Date: "2014-12",
          scales: 1098,
        },
        {
          Date: "2015-01",
          scales: 1189,
        },
        {
          Date: "2015-02",
          scales: 1276,
        },
        {
          Date: "2015-03",
          scales: 1033,
        },
        {
          Date: "2015-04",
          scales: 956,
        },
        {
          Date: "2015-05",
          scales: 845,
        },
        {
          Date: "2015-06",
          scales: 1089,
        },
        {
          Date: "2015-07",
          scales: 944,
        },
        {
          Date: "2015-08",
          scales: 1043,
        },
        {
          Date: "2015-09",
          scales: 893,
        },
        {
          Date: "2015-10",
          scales: 840,
        },
        {
          Date: "2015-11",
          scales: 934,
        },
        {
          Date: "2015-12",
          scales: 810,
        },
        {
          Date: "2016-01",
          scales: 782,
        },
        {
          Date: "2016-02",
          scales: 1089,
        },
        {
          Date: "2016-03",
          scales: 745,
        },
        {
          Date: "2016-04",
          scales: 680,
        },
        {
          Date: "2016-05",
          scales: 802,
        },
        {
          Date: "2016-06",
          scales: 697,
        },
        {
          Date: "2016-07",
          scales: 583,
        },
        {
          Date: "2016-08",
          scales: 456,
        },
        {
          Date: "2016-09",
          scales: 524,
        },
        {
          Date: "2016-10",
          scales: 398,
        },
        {
          Date: "2016-11",
          scales: 278,
        },
        {
          Date: "2016-12",
          scales: 195,
        },
      ];
      const line = new Line(this.$refs["container"], {
        data,
        padding: "auto",
        xField: "Date",
        yField: "scales",
        // x轴配置信息
        xAxis: {
          tickCount: 6,
        },
        yAxis: {
          // 刻度数量
          tickCount: 8,
        },
        // 更改提示框样式
        tooltip: {
          fields: ["Date", "scales"],
          domStyles: {
            "g2-tooltip": {
              background: "#014791",
              color: "#fff",
            },
          },
        },
      });
      line.render();
    },
  },
  // 生命周期 钩子函数 dom挂载到页面
  mounted() {
    this.loadCharts();
  },
};
</script>
<style lang="scss">
</style>
